<template>
  <el-container class="home-container">
<!--头部区域-->
    <el-header>
      <div class="textin-layout-header-container">
        <div class="header-logo">
          <img src="../assets/header_image/logo.png" alt="" class="logo">
          <span class="title">智禾ocr智能应用服务平台</span>
          <div class="login-line"></div>
          <span class="title">工作台</span>
          <el-select v-model="recognitionType" placeholder="请选择识别类型" class="recognition-select" @change="handleTypeChange">
            <el-option label="表格识别" value="table"></el-option>
            <el-option label="票据识别" value="receipt"></el-option>
<!--            <el-option label="印章识别" value="seal"></el-option>-->
            <el-option label="合同识别" value="contract"></el-option>
            <el-option label="通用识别" value="general"></el-option>
          </el-select>
        </div>
      </div>
    </el-header>
<!--页面主体区域-->
    <el-container>
<!--侧边栏-->
      <el-aside width="258px">
        <div class="left-bar-container">
          <div class="title-wrap">
            <span class="title">
              <span style="padding-right:8px;">我的文件</span>
              <svg t="1745565483854" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1265" width="16" height="16"><path d="M512 85.33333333C264.6 85.33333333 64 285.93333333 64 533.33333333s200.6 448 448 448 448-200.6 448-448S759.4 85.33333333 512 85.33333333z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="1266"></path><path d="M512 357.33333333m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="1267"></path><path d="M536 469.33333333h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V477.33333333c0-4.4-3.6-8-8-8z" p-id="1268"></path></svg>
            </span>
          </div>
          <el-upload
            class="upload-demo"
            action="#"
            :http-request="tableUploadRecognition"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileListShow"
            list-type="picture">
            <div class="upload-children">
              <svg t="1745719738152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1145" width="16" height="16"><path d="M1022.955204 577.58109333c0 100.19191-81.516572 181.698249-181.718715 181.698249l-185.637977 0c-11.2973 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l185.637977 0c77.628008 0 140.786467-63.148226 140.786467-140.766001 0-77.423347-62.841234-140.448776-140.203182-140.766001-0.419556 0.030699-0.828878 0.051165-1.248434 0.061398-5.935176 0.153496-11.665691-2.302439-15.666818-6.702656-4.001127-4.41045-5.884011-10.345626-5.157463-16.250102 1.330298-10.806113 1.944282-19.760043 1.944282-28.192086 0-60.763922-23.658839-117.874641-66.617234-160.833035-42.968627-42.958394-100.089579-66.617234-160.843268-66.617234-47.368844 0-92.742241 14.449084-131.208321 41.781592-37.616736 26.738991-65.952084 63.700811-81.925894 106.884332-2.425236 6.54916-8.012488 11.399631-14.827707 12.893658-6.815219 1.483794-13.927197-0.603751-18.859533-5.536087-19.289322-19.340487-44.943608-29.982872-72.245418-29.982872-56.322773 0-102.146425 45.813419-102.146425 102.125959 0 0.317225 0.040932 0.982374 0.092098 1.627057 0.061398 0.920976 0.122797 1.831718 0.153496 2.762927 0.337691 9.465582-5.863545 17.928325-15.001669 20.455891-32.356942 8.943696-61.541635 28.550243-82.181721 55.217602-21.305235 27.516704-32.571836 60.508096-32.571836 95.41307 0 86.244246 70.188572 156.422585 156.443052 156.422585l169.981393 0c11.2973 0 20.466124 9.15859 20.466124 20.466124 0 11.2973-9.168824 20.466124-20.466124 20.466124l-169.981393 0c-108.828614 0-197.3753-88.536452-197.3753-197.354833 0-44.053332 14.223956-85.712127 41.126676-120.473839 22.809495-29.450752 53.897537-52.086285 88.710414-64.816215 5.065366-74.322729 67.149353-133.2447 142.751215-133.2447 28.386514 0 55.504128 8.217149 78.651314 23.52581 19.657712-39.868009 48.842405-74.169233 85.497233-100.212376 45.434795-32.295544 99.004875-49.354058 154.918325-49.354058 71.692832 0 139.087778 27.915793 189.782368 78.600149 50.694589 50.694589 78.610382 118.089535 78.610382 189.782368 0 3.704368-0.102331 7.470135-0.296759 11.368932C952.633602 407.57923433 1022.955204 484.52162733 1022.955204 577.58109333zM629.258611 610.43945533c-3.990894 3.990894-9.230222 5.996574-14.46955 5.996574s-10.478655-2.00568-14.46955-5.996574l-67.087954-67.077721 0 358.689289c0 11.307533-9.15859 20.466124-20.466124 20.466124-11.307533 0-20.466124-9.15859-20.466124-20.466124l0-358.689289-67.087954 67.077721c-7.992021 7.992021-20.947078 7.992021-28.939099 0s-7.992021-20.957311 0-28.949332l102.023628-102.013395c7.992021-7.992021 20.947078-7.992021 28.939099 0l102.023628 102.013395C637.250632 589.48214433 637.250632 602.44743433 629.258611 610.43945533z" fill="#4877ff" p-id="1146"></path></svg>
              <div class="text">上传文件</div>
              <div class="desc">(支持单个/批量上传)</div>
            </div>
          </el-upload>
          <div class="left-bar-footer">
            <div class="button-area">
              <button class="first-button"><span>多选</span></button>
              <el-button type="info" plain disabled class="second-button">重新识别</el-button>
            </div>
          </div>
        </div>
      </el-aside>
<!--右侧内容主体-->
      <el-main>
        <div class="main-left">
          <div class="upload-container">
            <div class="upload-wrapper">
              <div class="image-wrapper">
                <img v-if="previewImageUrl" :src="previewImageUrl" class="preview-image">
                <svg v-else t="1753861737013" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1009" width="72" height="72"><path d="M750.933333 0a34.133333 34.133333 0 0 1 34.133334 34.133333v170.666667h204.8a34.133333 34.133333 0 0 1 34.133333 34.133333v750.933334a34.133333 34.133333 0 0 1-34.133333 34.133333H34.133333a34.133333 34.133333 0 0 1-34.133333-34.133333V238.933333a34.133333 34.133333 0 0 1 34.133333-34.133333h204.8V34.133333a34.133333 34.133333 0 0 1 34.133334-34.133333h477.866666z m-238.933333 340.206933l-221.866667 256h136.533334v292.386134h170.666666v-292.386134h136.533334l-221.866667-256z" fill="#3586FF" p-id="1010"></path></svg>
              </div>
              <div class="action-guide" v-if="!previewImageUrl"><span>点击上传文件 / 拖拽文件到此处 / 截图后ctrl+v</span></div>
              <div class="desc" v-if="!previewImageUrl">
                <div>支持jpg, png, bmp, pdf, tiff, 单帧gif等格式，</div>
                <div>上传单个文件大小不超过10M</div>
              </div>
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="tab-list">
            <el-tabs tab-position="top" :stretch="true">
              <el-tab-pane label="识别结果">
                <table border="1" cellspacing="0" cellpadding="6">
                  <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
                    <td
                      v-for="(cell, colIndex) in row"
                      :key="colIndex"
                      :rowspan="cell.rowspan"
                      :colspan="cell.colspan"
                    >
                      {{ cell.text }}
                    </td>
                  </tr>
                </table>
                <div class="el-tab-pane-footer">
                  <div class="button-area">
                    <el-button type="info" plain disabled class="export-button">
                      <svg t="1745913636896" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1178" width="16" height="16"><path d="M896 778.66666665c-17.066667 0-32 14.933333-32 32v128c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128c0 40.533333 34.133333 74.666667 74.666667 74.666667h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667v-128c0-17.066667-14.933333-32-32-32z" fill="#bcbec2" p-id="1179"></path><path d="M488.533333 834.13333365c6.4 6.4 14.933333 8.533333 23.466667 8.533333s17.066667-2.133333 23.466667-8.533333l213.333333-213.333334c12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0l-157.866667 157.866667V277.33333365c0-17.066667-14.933333-32-32-32s-34.133333 14.933333-34.133333 32v456.533333L322.133333 575.99999965c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l211.2 213.333334z" fill="#bcbec2" p-id="1180"></path></svg>
                      导出结果
                    </el-button>
                    <el-button disabled class="question-button">问题反馈</el-button>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="JSON结果">
                <div class="json-viewer-container">
                  <json-viewer
                    v-if="jsonResult"
                    :value="jsonResult"
                    :expand-depth="5"
                    copyable
                    sort
                    boxed
                    :expanded="true"
                  ></json-viewer>
                  <div v-else class="no-data">
                    暂无数据，请上传图片进行识别
                  </div>
                </div>
                <div class="el-tab-pane-footer">
                  <div class="button-area">
                    <el-button type="info" plain disabled class="export-button">
                      <svg t="1745913636896" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1178" width="16" height="16"><path d="M896 778.66666665c-17.066667 0-32 14.933333-32 32v128c0 6.4-4.266667 10.666667-10.666667 10.666667H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667v-128c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v128c0 40.533333 34.133333 74.666667 74.666667 74.666667h682.666666c40.533333 0 74.666667-34.133333 74.666667-74.666667v-128c0-17.066667-14.933333-32-32-32z" fill="#bcbec2" p-id="1179"></path><path d="M488.533333 834.13333365c6.4 6.4 14.933333 8.533333 23.466667 8.533333s17.066667-2.133333 23.466667-8.533333l213.333333-213.333334c12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0l-157.866667 157.866667V277.33333365c0-17.066667-14.933333-32-32-32s-34.133333 14.933333-34.133333 32v456.533333L322.133333 575.99999965c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l211.2 213.333334z" fill="#bcbec2" p-id="1180"></path></svg>
                      导出结果
                    </el-button>
                    <el-button disabled class="question-button">问题反馈</el-button>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
/* eslint camelcase: "off" */
import JsonViewer from 'vue-json-viewer'
import { Select, Option } from 'element-ui'

export default {
  components: {
    JsonViewer,
    [Select.name]: Select,
    [Option.name]: Option
  },
  data () {
    return {
      value: true,
      recognitionType: 'table',
      // 上传组件中文件展示的列表
      fileListShow: [],
      // 要渲染的列表数组
      tableResult: [],
      // 添加预览图片URL
      previewImageUrl: '',
      // 添加JSON结果数据
      jsonResult: null
    }
  },
  created () {
    // 根据当前路由设置默认值
    const routeMap = {
      '/home': 'table',
      '/invoice': 'receipt',
      '/seal': 'seal',
      '/contract': 'contract',
      '/general': 'general'
    }
    this.recognitionType = routeMap[this.$route.path] || 'table'
  },
  methods: {
    handleTypeChange (value) {
      const routeMap = {
        table: '/home',
        receipt: '/invoice',
        seal: '/seal',
        contract: '/contract',
        general: '/general'
      }
      const targetRoute = routeMap[value]
      if (this.$route.path !== targetRoute) {
        this.$router.push(targetRoute)
      }
    },
    async tableUploadRecognition (option) {
      const formData = new FormData()
      formData.append('image', option.file)

      const token = window.sessionStorage.getItem('token')

      try {
        // 创建预览图片URL
        this.previewImageUrl = URL.createObjectURL(option.file)
        const { data: res } = await this.$http.post('table/recognition/tableRecognitionGeneral', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: `Bearer ${token}`
          }
        })
        console.log('识别结果:', res)
        if (res.code === 200 && res.data && res.data.table && res.data.table.result && res.data.table.result.tables) {
          this.tableResult = res.data.table.result.tables
          this.jsonResult = res.data // 保存完整的JSON结果
          option.onSuccess(res.data)
        } else {
          this.$message.error('识别失败：' + (res.msg || '未知错误'))
          option.onError(new Error(res.msg || '识别失败'))
        }
      } catch (error) {
        console.error('识别错误:', error)
        this.$message.error('识别失败：' + (error.message || '未知错误'))
        option.onError(error)
      }
    },
    // 点击预览：打开图片新窗口
    handlePreview (file) {
      window.open(file.url, '_blank')
    },
    // 删除：从 fileList 中移除
    handleRemove (file, fileList) {
      this.fileList2 = fileList
      this.previewImageUrl = '' // 清除预览图片
      this.jsonResult = null // 清除JSON结果
      console.log('已删除', file.name)
    }
  },
  computed: {
    // 渲染列表的方法
    tableData () {
      if (!this.tableResult || !Array.isArray(this.tableResult)) {
        console.log('tableResult 无效:', this.tableResult)
        return []
      }

      // 找出总行列
      let maxRow = 0
      let maxCol = 0
      this.tableResult.forEach(cell => {
        if (cell && typeof cell === 'object') {
          maxRow = Math.max(maxRow, cell.row_end || 0)
          maxCol = Math.max(maxCol, cell.col_end || 0)
        }
      })

      console.log('表格维度:', { maxRow, maxCol }) // 添加调试信息

      // 初始化二维数组
      const table = Array.from({ length: maxRow + 1 }, () =>
        Array.from({ length: maxCol + 1 }, () => null)
      )

      // 填充表格
      this.tableResult.forEach(cell => {
        if (!cell || typeof cell !== 'object') return

        const { row_start, row_end, col_start, col_end, text } = cell
        if (typeof row_start !== 'number' || typeof row_end !== 'number' ||
            typeof col_start !== 'number' || typeof col_end !== 'number') {
          console.warn('无效的单元格数据:', cell)
          return
        }

        const rowspan = row_end - row_start + 1
        const colspan = col_end - col_start + 1

        // 填入主单元格
        table[row_start][col_start] = {
          text: text || '',
          rowspan,
          colspan,
          skipped: false
        }

        // 其他位置标记为跳过
        for (let i = row_start; i <= row_end; i++) {
          for (let j = col_start; j <= col_end; j++) {
            if (i === row_start && j === col_start) continue
            table[i][j] = { skipped: true }
          }
        }
      })

      return table.map(row =>
        row.filter(cell => cell && !cell.skipped)
      )
    }
  }
}
</script>

<style lang="less" scoped>
.home-container{
  height:100%;
  width:100%;
}

.el-header{
  width:100%;
  padding-left: 0;
  padding-right: 0;
  border-bottom: 1px solid #dcdfe5;
  background: #fff;
  overflow: hidden;
}

.textin-layout-header-container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
}

.header-logo{
  display: flex;
  align-items: center;
  gap:6px;
  min-width:184px;
  cursor: pointer;
  white-space: nowrap;
}

.logo{
  height:30px;
  width:30px;
}

.logo-text{
  width:82px;
  height:30px;
}

.login-line{
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: #dcdfe5;
  opacity: 0.5
}

.local-name{
  width:60px;
  height:30px;
}

.header-right {
  display: flex;
  align-items: center;
}

.recognition-select {
  width: 120px;
  margin-left: 20px;

  ::v-deep .el-input__inner {
    height: 32px;
    line-height: 32px;
    color: #030a1a;
    background: #fff;
    border: 1px solid #dcdfe5;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;

    &:hover {
      border-color: #1a66ff;
      color: #1a66ff;
    }

    &:focus {
      border-color: #1a66ff;
      color: #1a66ff;
    }
  }

  ::v-deep .el-input__suffix {
    color: #858c99;
    transition: color 0.3s;
  }

  ::v-deep .el-input:hover .el-input__suffix {
    color: #1a66ff;
  }

  ::v-deep .el-select-dropdown__item {
    color: #030a1a;
    font-size: 14px;

    &.selected {
      color: #1a66ff;
      font-weight: 700;
    }

    &:hover {
      background-color: #e9f0ff;
    }
  }
}

.el-aside .left-bar-container{
  position: relative;
  z-index: 2;
  display:flex;
  flex-direction:column;
  height:100%;
  border-right: 1px solid #dcdfe5;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 120px;
  flex: 0 0 258px;
  padding:0 20px;
}

.title-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  margin-bottom: 3px
}

.title-wrap .title{
  display: flex;
  align-items: center;
  color: #030a1a;
  font-weight: 700;
  font-size: 14px;

  .recognition-select {
    width: 217px;
    height: 40px;
    margin-right: 8px;

    ::v-deep .el-input__inner {
      height: 40px;
      line-height: 40px;
      color: #4877ff;
      background: #e9f0ff;
      border: 1px dashed #a3c2ff;
      border-radius: 2px;
      cursor: pointer;
      transition: border-color 0.3s;

      &:hover {
        border-color: #1a66ff;
      }
    }

    ::v-deep .el-input__suffix {
      color: #4877ff;
    }
  }
}

.scaled-switch{
  transform: scale(0.8); /* 将开关缩小为 80% */
  transform-origin: center; /* 确保缩放是从中心开始 */
}

.title-wrap .title .icon{
  cursor:pointer;
  fill: #858c99;
}

.title-wrap .title .icon:hover{
  fill: #1a66ff;
}

.robot-upload:hover{
  border-color: #1a66ff
}

.upload-children{
  position: relative;
  height:40px;
  width:217px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4877ff;
  white-space: nowrap;
  background: #e9f0ff;
  border: 1px dashed #a3c2ff;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.upload-children .text{
  margin-left: 4px;
  font-size: 14px
}

.upload-children .desc{
  margin-left: 4px;
  color: #a3c2ff;
  font-size: 13px
}

.left-bar-footer{
  position:absolute;
  left:20px;
  right: 20px;
  bottom:0px;
  display: flex;
  box-sizing: border-box;
  padding: 16px 0px 20px;
  width: 100%;
  height: 68px;
  align-items: center;
}

.left-bar-footer .button-area{
  display: flex;
  width: 218px;
  justify-content: space-between;
}

.left-bar-footer .button-area .first-button{
  width: 28px;
  height: 32px;
  background-color:#fff;
  font-size: 14px;
  border: none;
  padding:4px 0;
  cursor: pointer;
  color:#1a66ff
}

.left-bar-footer .button-area .first-button:hover span{
  text-decoration: underline;
}

.left-bar-footer .button-area .second-button{
  width: 88px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-main{
  width:100%;
  height:100%;
  overflow: hidden;
  display: flex;
  padding: 0;
}

.el-main .main-left{
  flex:1 1 50%;
  overflow: hidden;
  border-right: 1px solid #dcdfe5;
  background: #f2f5fa;
  position: relative;
  padding:20px;
  box-sizing: border-box;
}

.el-main .main-right{
  flex:1 1 50%;
  overflow: hidden;
  min-width: 0;
  box-sizing: border-box;
}

.el-main .main-left .upload-container{
  width: 100%;
  height: 100%;
  border: 1px dashed #a3c2ff;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.el-main .main-left .upload-container .upload-wrapper{
  width: 100%;
  height: 156px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.el-main .main-left .upload-container .upload-wrapper .image-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    height: 72px;
    width: 72px;
    object-fit: contain;
  }
  .preview-image {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

.el-main .main-left .upload-container .upload-wrapper .action-guide {
  margin: 16px 0 4px 0;
  display: flex;
  justify-content: center;
  font-size: 17px;
  font-weight: 550;
  color: #030a1a;
}

.el-main .main-left .upload-container .upload-wrapper .desc{
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #858c99;
  font-weight: 400;
  font-size: 14px;
}

.el-main .main-right .tab-list{
  height: 100%;
  width: 100%;
}

.el-main .main-right .tab-list .el-tabs{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

::v-deep .el-main .main-right .tab-list .el-tabs .el-tabs__header{
  height: 40px;
  margin-bottom: 16px;
}

::v-deep .el-tabs__content{
  height: 100%;
  width: 100%;
  flex:1 1 0;
  padding: 0 20px;
  box-sizing: border-box;
}

::v-deep .el-main .main-right .tab-list .el-tabs .el-tab-pane{
  width: 100%;
  height: 100%;
  position: relative;
}

.el-main .main-right .tab-list .el-tabs .el-tabs__content .el-tab-pane .el-tab-pane-footer{
  width: 100%;
  height: 72px;
  position: absolute;
  bottom:0;
  box-sizing: border-box;
  padding:20px;
}

.el-main .button-area{
  display: flex;
  justify-content: flex-end;
}

.el-main .button-area .export-button{
  width: 104px;
  height: 32px;
  margin-right:12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s;
}

.el-main .button-area .export-button:hover{
  background-color:#5e93ff;
}

.el-main .button-area .question-button{
  width: 84px;
  height: 32px;
  margin-left:12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.json-viewer-container {
  height: calc(100% - 72px);
  overflow-y: auto;
  padding: 20px;
  background: #fff;
  border-radius: 4px;

  .no-data {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909399;
    font-size: 14px;
  }
}

::v-deep .jv-container {
  background: #fff;
  border-radius: 4px;
  padding: 10px;
  .jv-code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    font-size: 14px;
  }
}

.title {
  font-weight: bold;
  font-size: 20px;
}
</style>
